<template>
  <div class="body">
    <header class="header">
      <div class="title">
        <img src="../../assets/images/01_11.png" alt="" class="img_zuo" @click="fanhui" />
        <!-- <img src="../../assets/images/01_11.png" alt="" class="img_zuo" /> -->
        <div>{{title}}监督检查计划</div>
        <div class="btn-add">
          <div @click="ckjh">查看计划</div>
          <!-- <img src="../../assets/images/big.png" alt="" /> -->
        </div>
        <!-- <div class="btn-change" @click="qiehuan">切换</div> -->
      </div>
    </header>
    <div class="contant contant_doc">

      <div class=" contant_top_1" style="width: 100%;" v-show="yinchang">
        <div class="hr"></div>
        <div class="tongji_title tongji_title1">
          <div>监督检查计划完成情况</div>
          <div>当期累计</div>
        </div>
        <div class="tongji_title_nav">
          <div>
            <div style="font-size: 0.2222rem;">当期计划数：</div>
            <div class="bg4"></div>
          </div>
          <div>
            <div style="font-size: 0.2222rem;">当期完成数：</div>
            <div class="bgs">
              <div class="bg3"></div>&nbsp;<div>重点检查</div>&nbsp;
              &nbsp;<div class="bg2"></div>&nbsp;<div>一般检查</div>&nbsp;
              &nbsp;<div class="bg1"></div>&nbsp;<div>随机抽查</div>
            </div>
          </div>
        </div>
        <div class="overhid">
          <div class="zzt_prent">
            <div id="zzt_x1" ref="zzt_x1"></div>
          </div>
        </div>
        <div class="hr"></div>
        <van-tabs v-model="active">
          <van-tab title="重点检查计划">

          </van-tab>
          <van-tab title="一般检查计划">
          </van-tab>
          <van-tab title="随机抽查计划">

          </van-tab>
        </van-tabs>
      </div>
      <div class="contant_top" style="width: 100%;">
        <div class="hr"></div>
        <div class="tongji_title">
          <div>监督检查计划完成情况</div>
          <div>当期累计</div>
        </div>
        <div class="tongji_title_nav">
          <div>
           
            <div style="font-size: 0.2222rem;">当期完成数：</div>
            <div class="bg4"></div>
          </div>
          <div>
            <div style="font-size: 0.2222rem;">当期计划数：</div>
            <div class="bgs">
              <div class="bg3"></div>&nbsp;<div>重点检查</div>&nbsp;
              &nbsp;<div class="bg2"></div>&nbsp;<div>一般检查</div>&nbsp;
              &nbsp;<div class="bg1"></div>&nbsp;<div>随机抽查</div>
            </div>
          </div>
        </div>
        <div class="overhid">
          <div class="zzt_prent">
            <div id="zzt_x" ref="zzt_x"></div>
          </div>
        </div>
        <div class="hr"></div>
      </div>
      <div class="contents" v-if="isRouterAlive">
        <van-tabs v-model="active">
          <van-tab title="重点检查计划">
            <zdjc_list></zdjc_list>
          </van-tab>
          <van-tab title="一般检查计划">
            <ybjc_list></ybjc_list>
          </van-tab>
          <van-tab title="随机抽查计划">
            <cc_list></cc_list>
          </van-tab>
        </van-tabs>
      </div>
    </div>



  </div>
</template>

<script>
  import echarts from "echarts"
  import zdjc_list from "./zdjc_list.vue"
  import ybjc_list from "./ybjc_list.vue"
  import cc_list from "./cc_list.vue"
  export default {
    name: 'tongji_2',
    data() {
      return {
        zzt_x: [[], [0, 0, 0], [0, 0, 0], []],
        yinchang: true,
        active: 0,
        scroll: 0,
        scro_0: 0,
        scro_1: 0,
        scro_2: 0,
        dwId: "",
        title: "监督检查计划",
        isRouterAlive: true,
        complete: 0,
        max_is:10,
      }
    },
    components: {
      zdjc_list, ybjc_list, cc_list
    },
    methods: {
      reload() {
        this.isRouterAlive = false
        this.$nextTick(() => (this.isRouterAlive = true))
      },
      qiehuan() {
        this.$router.push("/jdjc_wd");
      },
      fanhui() {
        // if (sessionStorage.getItem("index_rank") == 3) {
        //   this.$router.push("/index");
        // } else {
        //   this.$router.push("/tongji_2");
        // }
        this.$router.back()
      },
      ckjh() {//查看计划
        var info = {
          active: 0,
          jd: "",//id
          sq: this.dwId,
        }
        sessionStorage.setItem("jdjc_table_active", JSON.stringify(info))
        sessionStorage.setItem("jdjc_title", this.title)
        sessionStorage.setItem("jdjc_wd_fanhui_push", "/tongji_3")
        this.$router.push("/jdjc_wd");
        // if (sessionStorage.getItem("index_rank") == 1) {
        //   sessionStorage.setItem("jdjc_table_fanhui_push", "/tongji_3")
        //   this.$router.push("/jdjc_table");
        // } else {
        //   sessionStorage.setItem("jdjc_wd_fanhui_push", "/tongji_3")
        //   this.$router.push("/jdjc_wd");
        // }
      },
      zhuzhuangtu_x() {//柱状图
        var _this = this
        // var myChart_zz = echarts.init(document.getElementById("zz_tu"));
        let a = this.$refs.zzt_x
        // console.log(this.$refs)

        if (a) {
          let myChar = echarts.init(a)
          myChar.on('click', function (params) {
            console.log(params.dataIndex)
            var type = {
              0: 3,
              1: 2,
              2: 1,
            };
            var jdjc_params = {
              from: '/tongji_3',
              type: type[params.dataIndex],
              sqId: _this.dwId
            };
            localStorage.setItem("jdjc_params", JSON.stringify(jdjc_params));
            sessionStorage.setItem("jdjc_title", _this.title)
            _this.$router.push("/jdjc_list");
          })
          var option = {
            grid: {
              top: "5%",
              left: '0%',
              right: '20%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              max:_this.max_is,
              axisTick: {
                show: true,//取消刻度尺
                lineStyle: {
                  color: '#CCCCCC',//坐标轴刻度颜色,
                }
              },
              axisLabel: {
                show: true,

                textStyle: {
                  color: '#535353',//字体颜色,
                  fontSize: 12,
                },
              },
              axisLine: {
                lineStyle: {
                  color: '#CCCCCC',//坐标轴线颜色,
                }
              }
            },
            yAxis: {
              type: 'category',
              axisLabel: {
                show: true,
                // rotate: 30,
                textStyle: {
                  color: '#535353',//字体颜色
                  fontSize: 13,
                },
              },
              axisTick: {
                show: false,//取消刻度尺
              },
              axisLine: {
                show: false,//取消刻度尺
              },

              data: ['随机抽查', '一般检查', '重点检查']
            },
            series: [
              {
                type: 'bar',
                stack: '总量',
                color: "#FFBE23",
                label: {
                  normal: {
                    position: 'right',
                    show: false,
                  },
                },
                data: this.zzt_x[3]
              },

              {
                type: 'bar',
                stack: '总量',
                label: {
                  normal: {
                    position: 'right',
                    show: true,
                    color: "#535353",
                    formatter: function (params) {
                   
                      let Divisor = _this.zzt_x[params.dataIndex][params.dataIndex]
                      let coverDivisor = _this.zzt_x[params.dataIndex][params.dataIndex] + _this.zzt_x[3][params.dataIndex]
                      if (coverDivisor != 0 && params.dataIndex==0) {
                        return "(" + _this.zzt_x[3][params.dataIndex] + "/" + coverDivisor + ")"
                      } else {
                        return ""
                      }
                    },

                  }
                },
                barWidth: 20,

                color: "#77E469",
                data: this.zzt_x[0]
              },
              {
                type: 'bar',
                stack: '总量',
                label: {
                  normal: {
                    position: 'right',
                    show: true,
                    color: "#535353",
                    formatter: function (params) {
                   
                      let Divisor = _this.zzt_x[params.dataIndex][params.dataIndex]
                      let coverDivisor = _this.zzt_x[params.dataIndex][params.dataIndex] + _this.zzt_x[3][params.dataIndex]
                      if (coverDivisor != 0 && params.dataIndex==1) {
                        return "(" + _this.zzt_x[3][params.dataIndex] + "/" + coverDivisor + ")"
                      } else {
                        return ""
                      }
                    },
                  }
                },
                color: "#23C9FF",

                data: this.zzt_x[1]
              },
              {
                type: 'bar',
                stack: '总量',
                label: {
                  normal: {
                    position: 'right',
                    show: true,
                    color: "#535353",
                    formatter: function (params) {
                   
                      let Divisor = _this.zzt_x[params.dataIndex][params.dataIndex]
                      let coverDivisor = _this.zzt_x[params.dataIndex][params.dataIndex] + _this.zzt_x[3][params.dataIndex]
                      if (coverDivisor != 0 && params.dataIndex==2) {
                        return "(" + _this.zzt_x[3][params.dataIndex] + "/" + coverDivisor + ")"
                      } else {
                        return ""
                      }
                    },
                  }
                },
                color: "#238BFF",
                data: this.zzt_x[2]
              },
            ],


          };
          myChar.setOption(option);
        }
      },
      zhuzhuangtu_x1() {//柱状图
        var _this = this
        // var myChart_zz = echarts.init(document.getElementById("zz_tu"));
        let a = this.$refs.zzt_x1
        // console.log(this.$refs)
        console.log(this.zzt_x)
        if (a) {
          let myChar = echarts.init(a)
          myChar.on('click', function (params) {
            console.log(params.dataIndex)
            var type = {
              0: 3,
              1: 2,
              2: 1,
            };
            var jdjc_params = {
              from: '/tongji_3',
              type: type[params.dataIndex],
              sqId: _this.dwId
            };
            localStorage.setItem("jdjc_params", JSON.stringify(jdjc_params));
            sessionStorage.setItem("jdjc_title", _this.title)
            _this.$router.push("/jdjc_list");
          })
          var option = {
            grid: {
              top: "5%",
              left: '0%',
              right: '20%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              max:_this.max_is,
              axisTick: {
                show: true,//取消刻度尺
                lineStyle: {
                  color: '#CCCCCC',//坐标轴刻度颜色,
                }
              },
              axisLabel: {
                show: true,

                textStyle: {
                  color: '#535353',//字体颜色,
                  fontSize: 12,
                },
              },
              axisLine: {
                lineStyle: {
                  color: '#CCCCCC',//坐标轴线颜色,
                }
              }
            },
            yAxis: {
              type: 'category',

              axisLabel: {
                show: true,
                // rotate: 30,
                textStyle: {
                  color: '#535353',//字体颜色
                  fontSize: 13,
                },
              },
              axisTick: {
                show: false,//取消刻度尺
              },
              axisLine: {
                show: false,//取消刻度尺
              },

              data: ['随机抽查', '一般检查', '重点检查']
            },
            series: [
              {
                type: 'bar',
                stack: '总量',
                color: "#FFBE23",
                label: {
                  normal: {
                    position: 'right',
                    show: false,
                  },
                },
                data: this.zzt_x[3]
              },

              {
                type: 'bar',
                stack: '总量',
                label: {
                  normal: {
                    position: 'right',
                    show: true,
                    color: "#535353",
                    formatter: function (params) {
                   
                      let Divisor = _this.zzt_x[params.dataIndex][params.dataIndex]
                      let coverDivisor = _this.zzt_x[params.dataIndex][params.dataIndex] + _this.zzt_x[3][params.dataIndex]
                      if (coverDivisor != 0 && params.dataIndex==0) {
                        return "(" + _this.zzt_x[3][params.dataIndex] + "/" + coverDivisor + ")"
                      } else {
                        return ""
                      }
                    },

                  }
                },
                barWidth: 20,

                color: "#77E469",
                data: this.zzt_x[0]
              },
              {
                type: 'bar',
                stack: '总量',
                label: {
                  normal: {
                    position: 'right',
                    show: true,
                    color: "#535353",
                    formatter: function (params) {
                   
                      let Divisor = _this.zzt_x[params.dataIndex][params.dataIndex]
                      let coverDivisor = _this.zzt_x[params.dataIndex][params.dataIndex] + _this.zzt_x[3][params.dataIndex]
                      if (coverDivisor != 0 && params.dataIndex==1) {
                        return "(" + _this.zzt_x[3][params.dataIndex] + "/" + coverDivisor + ")"
                      } else {
                        return ""
                      }
                    },
                  }
                },
                color: "#23C9FF",

                data: this.zzt_x[1]
              },
              {
                type: 'bar',
                stack: '总量',
                label: {
                  normal: {
                    position: 'right',
                    show: true,
                    color: "#535353",
                    formatter: function (params) {
                   
                      let Divisor = _this.zzt_x[params.dataIndex][params.dataIndex]
                      let coverDivisor = _this.zzt_x[params.dataIndex][params.dataIndex] + _this.zzt_x[3][params.dataIndex]
                      if (coverDivisor != 0 && params.dataIndex==2) {
                        return "(" + _this.zzt_x[3][params.dataIndex] + "/" + coverDivisor + ")"
                      } else {
                        return ""
                      }
                    },
                  }
                },
                color: "#238BFF",
                data: this.zzt_x[2]
              },
            ],


          };
          myChar.setOption(option);
        }
      },
      scrollfunc() {
        var scroll_1 = document.documentElement.scrollTop;
        if (scroll_1) {
          if (this.scroll > scroll_1) {
            this.yinchang = true
            // $(".tou").addClass("posi")
          } else {
            this.yinchang = false
          }
          this.scroll = scroll_1;
        }

        if (this.scroll == 0) {
          this.yinchang = false
        }
        // console.log(this.scroll)
      },
      akey() {//重点检查
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log('plus问题');
        }
        this.axios.get(
          `${this.$global_msg.Url.host}/monitoringPlan/planFinishStatus1?userId=${this.userId}&dwId=${this.dwId}`
        ).then(res => {
          try {
            plus.nativeUI.closeWaiting();
          } catch (e) {
            console.log('plus问题');
          }
          console.log("重点检查", res)
          if (res.data.code == 200) {
            this.zzt_x[2][2] = (res.data.rows.total - res.data.rows.num)
            this.zzt_x[3][2] = res.data.rows.num
            this.complete += 1
            if(res.data.rows.total>10){
              this.max_is=null
            }
          } else {
            this.$toast(res.data.msg);
          }

        }).catch(err=>{
              this.$terminal._error(err)
          })
      },
      commonly() {//一般检查
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log('plus问题');
        }
        this.axios.get(
          `${this.$global_msg.Url.host}/monitoringPlan/planFinishStatus2?userId=${this.userId}&dwId=${this.dwId}`
        ).then(res => {
          try {
            plus.nativeUI.closeWaiting();
          } catch (e) {
            console.log('plus问题');
          }
          console.log("一般检查", res)
          if (res.data.code == 200) {
            this.zzt_x[1][1] = (res.data.rows.total - res.data.rows.num)
            this.zzt_x[3][1] = res.data.rows.num
            // this.zzt_x[1][1] =100
            // this.zzt_x[3][1] = 10
            this.complete += 1
            if(res.data.rows.total>10){
              this.max_is=null
            }
          } else {
            this.$toast(res.data.msg);
          }

        })
      },
      spotcheck() {//随机抽查
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log('plus问题');
        }
        this.axios.get(
          `${this.$global_msg.Url.host}/monitoringPlan/planFinishStatus3?userId=${this.userId}&dwId=${this.dwId}`
        ).then(res => {
          try {
            plus.nativeUI.closeWaiting();
          } catch (e) {
            console.log('plus问题');
          }
          console.log("随机抽查", res)
          if (res.data.code == 200) {
            this.zzt_x[0][0] = (res.data.rows.total - res.data.rows.num)
            this.zzt_x[3][0] = res.data.rows.num
            this.complete += 1
            if(res.data.rows.total>10){
              this.max_is=null
            }
          } else {
            this.$toast(res.data.msg);
          }

        })
      },

    },
    created() {
      this.userId = localStorage.getItem("userId")//获取访问id
      // this.title = sessionStorage.getItem("jdjc_tongji_title")
      // if (sessionStorage.getItem("index_rank") != "3") {
      //   this.dwId = sessionStorage.getItem("tongji_2_id")
      //   this.title = sessionStorage.getItem("tongji_2_name")
      // }

    },

    /*beforeRouteLeave(to, from, next) {
      console.log(to)
      console.log(from)
      if (to.path === '/tongji_2') {//如果返回上一页时/tongji_2 那当前下次进来时候就不缓存了
        from.meta.keepAlive = false
      } if (to.path === '/jdjc_detail') {//如果返回上一页时/tongji_2 那当前下次进来时候就不缓存了
        from.meta.keepAlive = true
      }
      next()
    },*/
    //进入该页面时，用之前保存的滚动位置赋值
    beforeRouteEnter(to, from, next) {
      next(vm => {
        console.log(from)
        if (from.path == '/tongji_2' || from.path == '/index') {
          vm.userId = localStorage.getItem("userId")//获取访问id
          vm.title = sessionStorage.getItem("jdjc_tongji_title")
          if (sessionStorage.getItem("index_rank") != "3") {
            vm.dwId = sessionStorage.getItem("tongji_2_id")
            vm.title = sessionStorage.getItem("tongji_2_name")
          }
          vm.complete=0
          vm.reload()
          vm.akey()
          vm.commonly()
          vm.spotcheck()
          vm.active = 0;
        }
      })
    },
    mounted() {
      var _this = this;
      document.addEventListener("scroll", this.scrollfunc, true)
      // var win_h=window.screen.height
      // console.log("手机高度："+win_h)
      // var h1=$(".contant_top").height()
      // console.log("contant_top高度："+h1)
      // var h2=$(".header").height()
      // console.log("header高度："+h2)
      // var h3=45/960*win_h
      // var h4=$(".van-tabs__nav").height()
      // // $(".contents").height(win_h-h1-h2-h3)
      // $(".van-tabs__content").height(win_h-h1-h2-h3-h4)
      // // console.log($(".van-tabs__content"))
      // $(".van-tabs__content").css({"overflow-y":"auto"})
      // this.zhuzhuangtu_x()
      // this.zhuzhuangtu_x1()
      // this.akey()
      // this.commonly()
      // this.spotcheck()
      // this.active = Number(sessionStorage.getItem("tongji_3_active"))

      //物理返回
      // window.addEventListener("popstate", function(){
      //   _this.fanhui();
      // }, false);
    },
    watch: {
      active: function (newVal, oldVal) {
        // TO DO
        console.log("newVal:", newVal);
        console.log("oldVal:", oldVal);
        console.log(document.documentElement.scrollTop)
        if (oldVal == 0) {
          this.scro_0 = document.documentElement.scrollTop
        } else if (oldVal == 1) {
          this.scro_1 = document.documentElement.scrollTop
        } else if (oldVal == 2) {
          this.scro_2 = document.documentElement.scrollTop
        }

        if (newVal == 0) {
          console.log("------:" + this.scro_0)

          document.scrollingElement.scrollTop = 0
        } else if (newVal == 1) {
          document.scrollingElement.scrollTop = 0
        } else if (newVal == 2) {
          document.scrollingElement.scrollTop = this.scro_2
        }
        console.log(document.documentElement.scrollTop)
        // console.log("=====")
        // console.log(this.scro_0)
        // console.log(this.scro_1)
        // console.log(this.scro_2)

      },
      complete: function (i, ii) {
        if (i == 3) {
          console.log("=============执行")
          this.zhuzhuangtu_x()
          this.zhuzhuangtu_x1()
        }
      }

    }

  }
</script>

<style scoped>
  .body {
    overflow: hidden;
  }

  /* 头部 */
  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 20;
    font-size: 0.388888rem;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
    position: relative;
  }

  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }

  .btn-add {
    position: absolute;
    right: 0.37037rem;
    width: auto !important;
    height: 100%;
    bottom: 0;
    display: flex;
    align-items: center;
  }

  .btn-add {
    font-size: 0.388888rem !important;
  }

  .btn-change {
    position: absolute;
    left: 1.537037rem;
    font-size: 0.388888rem !important;
    bottom: 0;
    width: auto !important;
    height: 100%;
    display: flex;
    align-items: center;
  }

  /* 头部结束 */
  .contant {
    margin-top: 1.8519rem;
    display: flex;
    flex-wrap: wrap;
  }

  .hr {
    height: 0.1852rem;
    width: 100%;
    background: #F7F7F9;
    border-bottom: 1Px solid #EBEBEB;
  }

  .tongji_title {
    height: 1.0185rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.3704rem;
  }

  .tongji_title1 {
    height: 1.0185rem;
  }

  .tongji_title1>div {
    display: flex;
    align-items: center;
  }

  .tongji_title div {
    font-size: 0.3889rem;
  }

  /* 柱状图横向x */
  .zzt_prent {
    overflow-x: auto;
    height: 5rem;
    width: 100%;

    box-sizing: border-box;
  }

  #zzt_x {
    width: 100%;
    height: 5rem;
    margin-right: 10%;
  }

  #zzt_x1 {
    width: 100%;
    height: 5rem;
    margin-right: 10%;
  }

  .zzt_prent1 {
    overflow-x: auto;
    height: 5.5556rem;
    width: 100%;

    box-sizing: border-box;
  }

  #zzt_y {
    width: 100%;
    height: 5.5556rem;
    margin-right: 10%;
  }

  .overhid {
    overflow: hidden;
    padding: 0 0.3704rem;
  }

  .bgs {
    display: flex;
    align-items: center;
  }

  .bgs div {
    font-size: 0.2222rem;
  }

  .bg1 {
    background: #77E469;
    width: 0.3704rem;
    height: 0.1481rem;
  }

  .bg2 {
    background: #23C9FF;
    width: 0.3704rem;
    height: 0.1481rem;
  }

  .bg3 {
    background: #238BFF;
    width: 0.3704rem;
    height: 0.1481rem;
  }

  .bg4 {
    background: #FFBE23;
    width: 0.3704rem;
    height: 0.1481rem;
  }

  .contents {
    width: 100%;
  }

  .tongji_title_nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .tongji_title_nav>div {
    width: 100%;
    font-size: 0.3889rem;
    display: flex;
    align-items: center;
    padding: 0 0.3704rem;
  }

  .contant_top_1 {
    position: fixed;
    width: 100%;
    top: 1.8519rem;
    left: 0;
    z-index: 10;
    background: #fff;
  }
</style>